<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/x-admin.css" media="all">
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>角色管理</cite></a>
              <a><cite>角色列表</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:80%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="username"  placeholder="请输入登录名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>
    <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><button class="layui-btn" onclick="admin_add('添加用户','/system/user/add','600','500')"><i class="layui-icon">&#xe608;</i>添加</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input id="allChecked" type="checkbox" name="" value="">
            </th>
            <th>角色名称</th>
            <th>描述</th>
            <th>创建时间</th>
            <th>状态</th>
            <th width="120px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        </tr>
        </tbody>
    </table>

    <div id="page"></div>
</div>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/x-layui.js" charset="utf-8"></script>

<script>
    layui.use(['laydate','element','laypage','layer'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层

        //以上模块根据需要引入
        getPageData(1);
        /*请求后台数据，分页请求*/
        function getPageData(curr) {
            $.ajax({
                url:"/system/role/list/"+curr+"?pageSize="+5,
                dataType:"json",
                type:"POST",
                async:false,
                success:function (res) {
                    console.log(res)

                    var bodyContent = '';

                    if(res.meta.success){
                        var list = res.data.records;
                        laypage.pages = res.data.pages;
                        for (var i = 0; i <list.length;i++){

                            bodyContent += '<tr>'+
                                    '<td>'+
                                    '<input type="checkbox" value="'+list[i].id+'" name="">'+
                                    '</td>'+
                                    '<td>'+list[i].roleName+'</td>'+
                                    '<td >'+list[i].roleDesc+'</td>'+
                                    '<td >'+timesTamp(list[i].createTime)+'</td>'+
                                    '<td>'+list[i].userState+'</td>'+
                                    '<td class="td-manage">'+
                                    '<a style="text-decoration:none" onclick="admin_stop(this,\''+list[i].id+'\')" href="javascript:;" title="停用">'+
                                    '<i class="layui-icon">&#xe601;</i>'+
                                    '</a>'+
                                    '<a title="编辑" href="javascript:;" onclick="admin_edit(\'编辑\',\'/system/user/edit/'+list[i].id+'\',\'4\',\'\',\'510\')"class="ml-5" style="text-decoration:none">'+
                                    '<i class="layui-icon">&#xe642;</i>'+
                                    '</a>'+
                                    '<a title="删除" href="javascript:;" onclick="admin_del(this,\''+list[i].id+'\')" style="text-decoration:none">'+
                                    '<i class="layui-icon">&#xe640;</i>'+
                                    '</a>'+
                                    '</td>'+
                                    '</tr>';
                        }
                    }

                    if(bodyContent!=''){
                        $("tbody").html(bodyContent)

                        laypage({
                            cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                            pages: res.data.pages, //通过后台拿到的总页数
                            curr: curr || 1, //当前页
                            jump: function(obj, first){ //触发分页后的回调
                                if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                                    getPageData(obj.curr);
                                }
                            }
                        });
                    }else{
                        layer.msg("没有查询到数据！", {icon: 1})
                    }
                },
                error:function (XMLHttpRequest) {
                    layer.msg("系统错误", {icon: 1});
                }
            })
        }
        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
        }
        document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
        }
        /*全选checked*/
        $("#allChecked").click(function () {

            if ($(this).is(':checked')) {
                $("input:checkbox").prop('checked', true)
            } else {
                $("input:checkbox").prop('checked', false)
            }

        });
    });
</script>
</body>
</html>